<template name="my">
    <view class="my">
        <scroll-view scroll-y style="height:100vh">
            <view class="toppart">
                <img src="/static/img/bg.png" alt="" class="hubg" />
                <view class="cu-card case mycardt">
                    <view class="part">
                        <view
                            class="info"
                            v-for="(item, k) in item.tenantInfoList"
                            :key="k"
                        >
                            <view class="title">
                                <view class="img">
                                    <image
                                        src="/static/img/guohui.png"
                                        mode=""
                                        class="guohui"
                                    ></image
                                ></view>
                                <view class="">
                                    <view class="name">入住登录信息 </view>
                                    <view class="ename">
                                        Check-in and login information</view
                                    >
                                </view>
                            </view>
                            <view class="xinxi">
                                <view class=""
                                    ><text class="textc">姓 名</text>：
                                    <text>{{ item.tenantName }}</text></view
                                >
                                <view class=""
                                    ><text class="textc">手机号</text>：
                                    <text>{{
                                        item.tenantPhoneNumber
                                    }}</text></view
                                >
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
    name: "my",
    data() {
        return {
            item: {}
        };
    },
    computed: {
        ...mapState(["user"])
    },
    methods: {
        ...mapMutations({
            setUser: "setUser"
        })
    },
    onShow() {
        this.item = uni.getStorageSync("person");
    }
};
</script>

<style>
.toppart {
    /* height: 320rpx; */
    /* background-image: url(/static/img/youlan.png); */
    width: 100%;
    height: 100%;
    /* position: relative; */
}

.user {
    font-size: 18px;
    font-family: ArialMT;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
}

.userinfos {
    width: 750rpx;
    height: 210rpx;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #4382FF;
}

.userinfo-avatars {
    /* overflow: hidden; */
    display: block;
    width: 160rpx;
    height: 160rpx;
    margin: 20rpx;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    margin-left: 10px;
}

.userinfo {
    font-size: 14px;
}

.my .phoneNumber {
    margin-top: 10px;
}

.mycardt {
    margin-top: 10px;
    padding: 0 10px;
    height: 100%;
}

.mycardt .top {
    display: flex;
    justify-content: space-between;
    height: 123rpx;
    align-items: center;
    padding: 0 20px;
}

.mycardt .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
    height: 55px;
    font-size: 14px;
    font-family: AlibabaPuHuiTiR;
    font-weight: 400;
    color: rgba(121, 121, 121, 1);
}

.rightjiantou {
    height: 10px;
    width: 10px;
}

.titleimg {
    height: 15px;
    width: 15px;
    margin-right: 5px;
}

.mycontent {
    width: 100%;
    height: 151rpx;
    display: flex;
    padding: 10px;
}

.mycontentl {
    padding-left: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mycontentr {
    padding-left: 20px;
    flex: 1;
    border-left: 2px solid #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.changyong {
    font-size: 16px;
    color: #767676;
    font-weight: bolder;
}

.changyongtitle {
    color: #787878;
    font-size: 13px;
}

.changyong img {
    height: 10px;
    width: 5px;
    margin-left: 10px;
}

.mycardt .top text {
    font-size: 14px;
}

.bottom .paopao {
    display: flex;
    align-items: center;
}

.tuichu {
    background: #4382FF !important;
    color: white !important;
}

.youlan {
    height: 10px;
    width: 5px;
}

.youhui {
    height: 10px;
    width: 5px;
    margin-left: 5px;
}

.shares {
    position: none;
    margin-left: 0;
    background-color: white;
    border: none;
    padding-left: 0px;
    line-height: inherit;
}

.shares::after {
    border: none;
}

.bangzhu {
    font-size: 18px;
    font-family: AlibabaPuHuiTiM;
    font-weight: 500;
    color: rgba(121, 121, 121, 1);
}

.mycardt .top text.more {
    font-size: 12px;
}

.tui {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tui button {
    width: 100%;
    background: #ff7e00 !important;
    color: white;
}

.logout {
    color: #767676 !important;
}

.gang {
    background: #767676;
    line-height: 1px;
    width: 15px;
    height: 1px;
}

.hubg {
    position: absolute;
    top: 0;
    height: 300rpx;
    z-index: -1;
    width: 100%;
}

.shares {
    position: none;
    margin-left: 0;
    background-color: white;
    border: none;
    padding-left: 0px;
    line-height: inherit;
    font-size: 12px;
    color: black;
    padding-right: 0px;
}

.shares::after {
    border: none;
}

.part {
    margin-top: 20px;
    background: rgba(255, 255, 255, 1);
    border-radius: 32px 32px 0px 0px;
    display: flex;
    align-items: center;
    /* padding: 10px 0; */
    height: 100%;
	flex-direction: column
}
.info {
    width: 308px;
    background: rgba(255, 255, 255, 1);
    border: 2px solid rgba(193, 193, 193, 1);
    border-radius: 15px;

    display: flex;
    flex-direction: column;
    height: 120px;
    margin-top: 20px;
}
.info .name {
    font-size: 20px;
    font-family: Alibaba PuHuiTi;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
	letter-spacing:5px
}
.info .ename {
    font-size: 8px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
	letter-spacing:2px
	
}
.xinxi {
    font-size: 14px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: rgba(121, 121, 121, 1);
    display: flex;

    flex-direction: column;
    justify-content: center;
}
.info .title,
.info .xinxi {
    flex: 1;
}
.info .xinxi {
    background: rgba(255, 232, 228, 0.2);
    padding-left: 34px;
    border-radius: 0 0 15px 15px;
}
.info .title {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    color: white;
    padding-left: 30px;
}
.guohui {
    height: 40px;
    width: 40px;
    margin-right: 10px;
}
.textc {
		text-align: justify;
		text-align-last: justify;
		width: 50px;
		display: inline-block;
	}
</style>
